<div class="col-lg-6">
	<div class="panel panel-default">
		<div class="panel-body" style = "background: #CEE3F6">
			<div class="col-lg-12"><h2>Agregar Personal</h2><br/><br/></div>
			<div class="col-xs-12">
				<form id = "myForm" role="form" enctype="multipart/form-data" action="create.php" method="post">
					<div class="form-group col-xs-4">
						<label>Cédula&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="text" class="form-control" name="cedula" required>
					</div>
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-6">
						<label>Primer Nombre&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="text" class="form-control" name="primer_nombre" required>
					</div>
					<div class="form-group col-xs-6">
						<label>Segundo Nombre</label>
						<input type="text" class="form-control" name="segundo_nombre">
					</div>
					<div class="form-group col-xs-6">
						<label>Primer Apellido&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="text" class="form-control" name="primer_apellido" required>
					</div>
					<div class="form-group col-xs-6">
						<label>Segundo Apellido</label>
						<input type="text" class="form-control" name="segundo_apellido">
					</div>
					<div class="form-group col-xs-8">
			          	<label>Sexo&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
			          	<div>
							<input type="radio" name="ofertada" value="M" checked>&nbsp;Masculino &nbsp;&nbsp;&nbsp;
							<input type="radio" name="ofertada" value="F">&nbsp;Femenino
						</div>
					</div>
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-6">
						<label for="correo_inst">Correo Institucional&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="email" class="form-control" name="correo_inst" type = "email" required>
					</div>
					<div class="form-group col-xs-6">
						<label for="correo_alt">Correo Alternativo</label>
						<input type="email" class="form-control" name="correo_alt" type = "email">
					</div>
					<div class="form-group col-xs-6">
						<label for="main_phone">Teléfono Principal&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="text" class="form-control" name="main_phone" required>
					</div>
					<div class="form-group col-xs-6">
						<label for="alt_phone">Teléfono Alternativo&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="text" class="form-control" name="alt_phone" required>
					</div>
					<div class="form-group col-xs-12">
						<label>Dirección&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<textarea class="form-control" rows="3" name="address"></textarea>
					</div>
					<div class="form-group col-xs-12">
						<label>Tipo Personal</label>
						<select class="form-control" name ="tipoPersona">
							<option></option>
              <option>Estudiante</option>
              <option>Preparador</option>
							<option>Auxiliar Docente</option>
              <option>Profesor</option>
							<option>Personal Administrativo</option>
             </select>
					</div>
					<div class="form-group col-xs-4">
			          	</br><label><span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/>&nbsp;Campos obligatorios</label>
					</div>
					<div class="col-xs-12"></br></div>
					<div class="col-xs-4"></div>
					<div class="col-xs-4">	
						<input type="submit" id="siguiente" href="#" class="btn btn-primary form-control" value= "Siguiente"></input>
					</div>
					<div class="col-xs-4"></div>
					<div class="col-xs-12"></br></div>
				</form>
			</div> 
		</div>
	</div>
</div>

<div class="col-lg-6">
	<div class="panel panel-default">
		<div id = "formulario_continuacion" class="panel-body" style = "background: #CEE3F6">
		</div>
	</div>
</div>

<script type="text/javascript">
	$('[name=tipoPersona]').change(function (e) {
		tipo = $('[name=tipoPersona]').val();
		if(tipo == "Auxiliar Docente") $.ajax({type:"POST",url:"agregar_auxiliar_personal.html",success:function(result){$("#formulario_continuacion").html(result);}});
		if(tipo == "Estudiante") $.ajax({type:"POST",url:"agregar_estudiante.html",success:function(result){$("#formulario_continuacion").html(result);}});
		if(tipo == "Personal Administrativo") $.ajax({type:"POST",url:"agregar_auxiliar_personal.html",success:function(result){$("#formulario_continuacion").html(result);}});
		if(tipo == "Preparador") $.ajax({type:"POST",url:"agregar_preparador.html",success:function(result){$("#formulario_continuacion").html(result);}});
		if(tipo == "Profesor") $.ajax({type:"POST",url:"agregar_profesor.html",success:function(result){$("#formulario_continuacion").html(result);}});
		if(tipo == "") $("#formulario_continuacion").html('');
	});
</script>
